<template>
  <div
    class="top"
    style="width: 100%; height: 100%; display: flex; flex-direction: column"
  >
    <div
      style="
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
      "
    >
      <div
        class="item"
        v-for="(item, index) in list1.concat(list2)"
        :key="index"
      >
        <template>
          <div
            class="name"
            style="
              font-size: 22px;
              line-height: 24px;
              color: #fff;
              margin-bottom: 5px;
              text-align: center;
            "
          >
            {{ item.name }}
          </div>
          <div
            class="num"
            :style="{
              color: item.color,
              fontSize: '28px',
              fontWeight: 'bold',
              textAlign: 'center',
            }"
            @click="view(item)"
          >
            <!-- style="background:#0588ff;margin-right:5px;padding:0 5px;" -->
            <span v-for="(t, tIndex) in item.num.toString()" :key="tIndex">{{
              t
            }}</span>
            /
            <span v-for="(t, tIndex) in item.num1.toString()" :key="tIndex">{{
              t
            }}</span>
          </div>
        </template>
        <!-- <template v-else>
          <div
            class="name"
            style="font-size:18px;line-height:24px;margin:10px 0;color:transparent;"
          >1</div>
          <div class="num">
            <div
              class="name"
              style="font-size:22px;color:#fff;"
            >{{item.name}}</div>
            <div
              class="n"
              :style="{color:item.color,fontSize:'34px',fontWeight:'bold',textAlign:'center'}"
            >{{item.num}}</div>
          </div>
        </template> -->
      </div>
    </div>
    <!-- <div class="top fss">
      <div
        class="item"
        v-for="(item,index) in list1"
        :key="index"
      >
        <template v-if='index===0'>
          <div
            class="name"
            style="font-size:24px;line-height:24px;color:#fff;margin-bottom: 10px;"
          >{{item.name}}</div>
          <div
            class="num"
            :style="{color:item.color,fontSize:'34px',fontWeight:'bold',textAlign:'center'}"
            @click="view(item)"
          >
            <span
              style="background:#0588ff;margin-right:5px;padding:0 5px;"
              v-for="(t,tIndex) in (item.num || '00').toString()"
              :key="tIndex"
            >{{t}}</span>
          </div>
        </template>
        <template v-else>
          <div
            class="name"
            style="font-size:18px;line-height:24px;margin:10px 0;color:transparent;"
          >1</div>
          <div class="num">
            <div
              class="name"
              style="font-size:22px;color:#fff;"
            >{{item.name}}</div>
            <div
              class="n"
              :style="{color:item.color,fontSize:'34px',fontWeight:'bold',textAlign:'center'}"
            >{{item.num}}</div>
          </div>
        </template>
      </div>
    </div>
    <div class="bot-title">近半年</div>
    <div class="bot fss">
      <div
        class="item"
        v-for="(item,index) in list2"
        :key="index"
      >
        <div
          class="name"
          style="font-size:22px;line-height:12px;margin-top:10px;margin-bottom:12px;color:#fff;text-align:center;"
        >{{item.name}}</div>
        <div
          class="num"
          :style="{color:item.color,fontSize:'28px',fontWeight:'bold',textAlign:'center'}"
          @click="view(item)"
        >{{item.num}}</div>
      </div>
    </div> -->
    <RepairViewList
      :filters="filters"
      :sub_title="sub_title"
      v-model="dialog_visible"
    />
  </div>
</template>

<script>
import RepairViewList from "./RepairViewList.vue";
import { getColumns } from "../../../generate";

export default {
  name: "box2",
  components: {
    RepairViewList,
  },
  data() {
    return {
      list1: [
        {
          k: "TodayCountA",
          f: "TodayFileCountA",
          name: "今日工单",
          num: 0,
          num1: 0,
          color: "#fff",
        },
        {
          k: "TodayCountB",
          f: "TodayFileCountB",
          name: "在办/附件",
          num: 0,
          num1: 0,
          color: "#ef6179",
        },
        // {
        //   k: "TodayCountC",
        //   name: "已受理",
        //   num: 0,
        //   color: "#04ffce",
        // },
        // {
        //   k: "TodayCountD",
        //   name: "已完成",
        //   num: 0,
        //   num1: 0,
        //   color: "#04ffce",
        // },
      ],
      list2: [
        {
          k: "TodayCountE",
          f: "TodayFileCountE",
          name: "昨日量",
          num: 0,
          num1: 0,
          color: "#f4c132",
        },
        {
          k: "TodayCountF",
          f: "TodayFileCountF",
          name: "近七日",
          num: 0,
          num1: 0,
          color: "#04ffce",
        },
        {
          k: "TodayCountG",
          f: "TodayFileCountG",
          name: "月总量",
          num: 0,
          num1: 0,
          color: "#04ffce",
        },
        {
          k: "TodayCountH",
          f: "TodayFileCountH",
          name: "年总量",
          num: 0,
          num1: 0,
          color: "#04ffce",
        },
        // {
        //   k: "TodayCountI",
        //   name: "工单总量",
        //   num: 0,
        //   color: "#04ffce",
        // },
      ],
      model: null,
      dialog_visible: false,
      sub_title: null,
      filters: [],
    };
  },
  async mounted() {
    this.refresh();
    setInterval(this.refresh, 10 * 1000);
    this.columns = await getColumns("RepairViewListModel");
  },
  methods: {
    async refresh() {
      const res = await this.$http.get(
        `/api/RepairReport/RepairLargeScreenModelD`
      );

      for (const r of this.list1) {
        r.num = res[r.k];
        r.num1 = res[r.f];
      }
      for (const r of this.list2) {
        r.num = res[r.k];
        r.num1 = res[r.f];
      }

      this.model = res;
    },
    view({ k, name }) {
      let [ds, de] = this.model[`${k}Range`];
      this.filters = [];
      if (ds) {
        this.filters.push({
          Name: "ApplyTime",
          compare: ">=",
          value: ds,
        });
      }
      if (de) {
        this.filters.push({
          Name: "ApplyTime",
          compare: "<",
          value: de,
        });
      }
      if (k == "TodayCountB") {
        this.filters.push({
          Name: "RepairState",
          compare: "==",
          value: "C",
        });
      }
      if (k == "TodayCountC") {
        this.filters.push({
          Name: "RepairState",
          compare: "==",
          value: "D",
        });
      }
      if (k == "TodayCountD") {
        this.filters.push({
          Name: "RepairState",
          compare: "in",
          value: "E,F,Z",
        });
      }
      this.sub_title = name;
      this.dialog_visible = true;
    },
  },
};
</script>

<style lang="stylus" scoped>
.num {
  cursor: pointer;
}

.item {
  display: flex;
  flex-direction: column !important;
  font-family: Ap !important; 
}
</style>